<template>
  <div class="attack-matrix-container">
    <div class="page-header">
      <div class="header-content">
        <h2>ATT&CK矩阵</h2>
        <p>MITRE ATT&CK攻击技术矩阵展示</p>
      </div>
      <div class="header-actions">
        <el-button type="info" @click="filterByTactic('')">显示全部</el-button>
        <el-button type="primary" @click="exportMatrix">导出矩阵</el-button>
      </div>
    </div>

    <div class="matrix-wrapper">
      <div class="tactics-header">
        <div 
          v-for="tactic in tactics" 
          :key="tactic.id"
          :class="['tactic-column', { active: activeTactic === tactic.id }]"
          @click="filterByTactic(tactic.id)"
        >
          <h4>{{ tactic.name }}</h4>
          <p>{{ tactic.description }}</p>
        </div>
      </div>

      <div class="techniques-grid">
        <div 
          v-for="technique in filteredTechniques" 
          :key="technique.id"
          class="technique-card"
          @click="viewTechnique(technique)"
        >
          <div class="technique-header">
            <span class="technique-id">{{ technique.id }}</span>
            <span class="technique-level">{{ technique.level }}</span>
          </div>
          <h5 class="technique-name">{{ technique.name }}</h5>
          <p class="technique-description">{{ technique.description }}</p>
          <div class="technique-meta">
            <el-tag size="small" :type="getSeverityType(technique.severity)">
              {{ technique.severity }}
            </el-tag>
            <span class="technique-count">{{ technique.subTechniques || 0 }} 子技术</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTactic = ref('')

// 攻击战术
const tactics = ref([
  {
    id: 'TA0001',
    name: '初始访问',
    description: '获得网络访问权限的技术'
  },
  {
    id: 'TA0002', 
    name: '执行',
    description: '在本地或远程系统上运行恶意代码'
  },
  {
    id: 'TA0003',
    name: '持久化',
    description: '在系统重启后保持访问权限'
  },
  {
    id: 'TA0004',
    name: '权限提升',
    description: '获得更高级别的权限'
  },
  {
    id: 'TA0005',
    name: '防御规避',
    description: '避免被安全工具检测'
  },
  {
    id: 'TA0006',
    name: '凭据访问',
    description: '窃取账户名和密码'
  }
])

// 攻击技术
const techniques = ref([
  {
    id: 'T1566',
    name: '钓鱼攻击',
    description: '通过电子邮件、短信等方式进行社会工程学攻击',
    tacticId: 'TA0001',
    severity: '高危',
    level: '技术',
    subTechniques: 3
  },
  {
    id: 'T1059',
    name: '命令行接口',
    description: '使用命令行界面与系统交互',
    tacticId: 'TA0002',
    severity: '中危',
    level: '技术',
    subTechniques: 8
  },
  {
    id: 'T1053',
    name: '计划任务',
    description: '利用系统计划任务功能实现持久化',
    tacticId: 'TA0003',
    severity: '中危',
    level: '技术',
    subTechniques: 5
  },
  {
    id: 'T1055',
    name: '进程注入',
    description: '将代码注入到正在运行的进程中',
    tacticId: 'TA0004',
    severity: '高危',
    level: '技术',
    subTechniques: 12
  },
  {
    id: 'T1070',
    name: '指标移除',
    description: '删除可能泄露攻击者活动的文件和信息',
    tacticId: 'TA0005',
    severity: '中危',
    level: '技术',
    subTechniques: 6
  },
  {
    id: 'T1003',
    name: '操作系统凭据转储',
    description: '从操作系统中提取账户登录凭据',
    tacticId: 'TA0006',
    severity: '严重',
    level: '技术',
    subTechniques: 8
  }
])

// 计算属性
const filteredTechniques = computed(() => {
  if (!activeTactic.value) {
    return techniques.value
  }
  return techniques.value.filter(tech => tech.tacticId === activeTactic.value)
})

// 方法
const filterByTactic = (tacticId) => {
  activeTactic.value = tacticId
}

const viewTechnique = (technique) => {
  ElMessage.info(`查看技术详情: ${technique.name} (${technique.id})`)
}

const exportMatrix = () => {
  ElMessage.success('正在导出ATT&CK矩阵...')
}

// 工具函数
const getSeverityType = (severity) => {
  const typeMap = {
    '严重': 'danger',
    '高危': 'danger', 
    '中危': 'warning',
    '低危': 'info'
  }
  return typeMap[severity] || 'info'
}
</script>

<style lang="scss" scoped>
.attack-matrix-container {
  padding: 20px;
  background-color: var(--bg-color);
}



  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.matrix-wrapper {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.tactics-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background-color: var(--border-color);
  padding: 1px;

  .tactic-column {
    background: var(--bg-color-secondary);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover, &.active {
      background: var(--primary-color);
      color: white;
    }

    h4 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      margin: 0;
      font-size: 12px;
      opacity: 0.8;
      line-height: 1.4;
    }
  }
}

.techniques-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.technique-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--primary-color);
  }

  .technique-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .technique-id {
      font-weight: 600;
      color: var(--primary-color);
      font-size: 14px;
    }

    .technique-level {
      font-size: 12px;
      color: var(--text-color-secondary);
      background: var(--bg-color-secondary);
      padding: 2px 8px;
      border-radius: 4px;
    }
  }

  .technique-name {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
  }

  .technique-description {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-color-secondary);
    line-height: 1.4;
    display: -webkit-box;
    // -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .technique-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .technique-count {
      font-size: 12px;
      color: var(--text-color-secondary);
    }
  }
}
</style> 